<template>
  <div class="manage">
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handelClose">
      <!--新增表单信息 -->
      <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px">
        <el-form-item label="地址名称" prop="pathName" >
          <el-input placeholder="请输入地址名称" v-model="form.pathName" ></el-input>
        </el-form-item>
        <el-form-item label="系统路径" prop="filePath" >
          <el-input placeholder="请输入系统路径" v-model="form.filePath" style="width: 500px"></el-input>
        </el-form-item>
        <br/>
        <el-form-item label="状态" prop="delFlag">
          <el-radio-group v-model="form.delFlag">
            <el-radio :label="0">正常</el-radio>
            <el-radio :label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <br/>
        <el-form-item label="备注">
          <el-input type="textarea" placeholder="请输入备注" v-model="form.remark" style="width: 500px"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <!--form 搜索区-->
    <el-form :inline="true" :model="userForm">
      <el-form-item label="地址名称">
        <el-input placeholder="地址名称" v-model="userForm.pathName" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="系统路径">
        <el-input placeholder="系统路径" v-model="userForm.filePath" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="userForm.delFlag" clearable placeholder="状态" size="mini">
          <el-option
            v-for="item in delFlag"
            :key="item.code"
            :label="item.value"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini" plain><i class="el-icon-search"></i>搜 索</el-button>
        <el-button  @click="onReset" size="mini" plain><i class="el-icon-refresh"></i>重 置</el-button>
      </el-form-item>
    </el-form>
    <div class="manage-header">
      <el-button @click="handelAdd" type="primary" plain size="mini">
        <i class="el-icon-plus"></i>新增
      </el-button>
    </div>
    <div class="common-table">
      <!--内容-->
      <el-table
        height="90%"
        :data="tableData"
        style="width: 100%"
        stripe>
        <el-table-column type="index" label="序号" fixed></el-table-column>
        <el-table-column prop="pathName" label="文件名称" width="200px" fixed></el-table-column>
        <el-table-column prop="filePath" label="文件路径" width="350px"></el-table-column>
        <el-table-column prop="remark" label="备注" width="200px"></el-table-column>
        <el-table-column prop="" label="状态" width="100">
          <template slot-scope="scope">
            <a @click="updateDelFlag(scope.row)">
              <el-switch
                v-model="scope.row.delFlag==0 ? true : false"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </a>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          width="170"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          width="170"
          label="修改时间">
        </el-table-column>
        <el-table-column prop="" label="操作" width="130" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handelEditFileAddress(scope.row)"><i class="el-icon-edit"></i>修改</el-button>
            <el-button type="text" size="mini" @click="handelDelFileAddress(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--页码-->
      <div class="pager">
        <el-pagination
          layout="prev, pager, next"
          :total="this.total"
          @current-change="handelPage">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
    import { listPageFileAddress, saveOrUpdateFileAddress,  delFileAddress} from "../api"
    export default {
        name: "FileAddress",
        data(){
            return{
                dialogVisible:false,
                form: {
                    id: '',
                    pathName: '',
                    filePath: '',
                    remark:'',
                    delFlag:0
                },
                rules:{
                    pathName: [
                        {required: true,message: '请输入文件名称'}
                    ],
                    filePath: [
                        {required: true,message: '请输入文件路径'}
                    ]
                },
                tableData: [],
                modelType: 0,  //0：新增，1：修改
                total: 0,
                pageData:{
                    page: 1,
                    limit: 10
                },
                //查询条件
                userForm: {
                    pathName: "",
                    filePath: '',
                    delFlag: null
                },
                delFlag: [
                    {
                        code: 0,
                        value: '正常'
                    },
                    {
                        code: 1,
                        value: '停用'
                    }
                ]
            }
        },
        methods:{
            //提交用户表单
            submit(){
                //进行校验
                this.$refs.form.validate((valid)=>{
                    if (valid){
                        if (this.modelType == 0){
                            //新增
                            this.form.id=null;
                            saveOrUpdateFileAddress(this.form).then(({ data })=>{
                                this.$message({
                                    type: data.type,
                                    message: data.message
                                });
                                this.listPageFileAddress();
                            });
                        }else{
                            //修改
                            saveOrUpdateFileAddress(this.form).then(({ data }) => {
                                this.$message({
                                    type: data.type,
                                    message: data.message
                                });
                                this.listPageFileAddress();
                            });
                        }
                        this.handelClose();
                    }
                });
            },
            //弹窗关闭的时候
            handelClose(){
                //重置表单
                this.$refs.form.resetFields();
                this.dialogVisible=false;
            },
            //点击取消
            cancel(){
                this.handelClose();
            },
            //编辑
            handelEditFileAddress(row){
                this.modelType=1;
                this.dialogVisible=true;
                //查找出role的部门和菜单,并编辑
                this.form=JSON.parse(JSON.stringify(row));
            },
            //修改状态
            updateDelFlag(row){
                this.$confirm('确定要“'+(row.delFlag == 0 ? "停用" : "启用")+'”“'+row.pathName+'吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    row.delFlag=(row.delFlag == 0 ? 1 : 0);
                    //修改
                    saveOrUpdateFileAddress(row).then(({ data }) => {
                        this.listPageFileAddress();
                        this.$message({
                            type: data.type,
                            message: data.message
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            //删除
            handelDelFileAddress(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delFileAddress(row).then(({ data })=>{
                        this.listPageFileAddress();
                        this.$message({
                            type: data.type,
                            message: data.message
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //新增
            handelAdd(){
                this.form={
                    id: '',
                    pathName: '',
                    filePath: '',
                    remark:'',
                    delFlag:0
                };
                this.modelType=0;
                this.dialogVisible=true;
            },
            //获取列表
            listPageFileAddress(){
                listPageFileAddress({...this.userForm,...this.pageData}).then(( {data} )=>{
                    //console.log(data,"获取的")
                    this.tableData=data.list;
                    //如果data.count不存在 就为0
                    this.total=data.count || 0;
                });
            },
            //获取页码
            handelPage(val){
                this.pageData.page=val;
                this.listPageFileAddress();
            },
            //条件查询
            onSubmit(){
                this.listPageFileAddress();
            },
            //重置
            onReset(){
                this.userForm={
                    pathName: "",
                    filePath: '',
                    delFlag: null
                }
            }
        },
        //页面首次加载时调用的地方
        mounted() {
            this.listPageFileAddress();
        }
    }
</script>

<style lang="less" scoped>
  .manage{
    height: 90%;
    .manage-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .common-table{
      position: relative;
      //动态计算高度
      height: calc(100% - 62px);
      .pager{
        position: absolute;
        bottom: 0;
        right: 20px;
      }
    }
  }
</style>
